// Register
.body-login-bg {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: $bg-main;
}

.body-login {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 60px 25px;

  .logo-wrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0;

    .logo {
      border: 2px solid $color-main;
      @include border-radius(200px);
      overflow: hidden;
      height: 150px;
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      $timer: 0;
      @include transition(all 0.3s);
      @include box-shadow(
                      3px*$timer 3px*$timer 0 transparentize(black, 0.6),
                      -5px*$timer -8px*$timer 3px*$timer transparentize($color-main, 0.3),
                      -15px*$timer 13px*$timer 4px*$timer transparentize($green, 0.3),
                      -45px*$timer 8px*$timer 10px*$timer transparentize($cyan, 0.5),
                      15px*$timer -15px*$timer 10px*$timer transparentize($blue, 0.1),
                      65px*$timer 65px*$timer 30px*$timer transparentize($yellow, 0.6),
                      20px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.2),
                      -20px*$timer -45px*$timer 15px*$timer transparentize($red, 0.6),
                      -105px*$timer 38px*$timer 20px*$timer transparentize($green, 0.5),
                      15px*$timer -105px*$timer 10px*$timer transparentize($blue, 0.6),
                      140px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.6),
                      -20px*$timer -145px*$timer 40px*$timer transparentize($yellow, 0.6),
                      60px*$timer -65px*$timer 40px*$timer transparentize($magenta, 0.2),
      );
      &.valid{
        $timer: 0.15;
        @include transition(all 0.3s);
        @include box-shadow(
                3px*$timer 3px*$timer 0 transparentize(black, 0.6),
                -5px*$timer -8px*$timer 3px*$timer transparentize($color-main, 0.3),
                -15px*$timer 13px*$timer 4px*$timer transparentize($green, 0.3),
                -45px*$timer 8px*$timer 10px*$timer transparentize($cyan, 0.5),
                15px*$timer -15px*$timer 10px*$timer transparentize($blue, 0.1),
                65px*$timer 65px*$timer 30px*$timer transparentize($yellow, 0.6),
                20px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.2),
                -20px*$timer -45px*$timer 15px*$timer transparentize($red, 0.6),
                -105px*$timer 38px*$timer 20px*$timer transparentize($green, 0.5),
                15px*$timer -105px*$timer 10px*$timer transparentize($blue, 0.6),
                140px*$timer 45px*$timer 15px*$timer transparentize($magenta, 0.6),
                -20px*$timer -145px*$timer 40px*$timer transparentize($yellow, 0.6),
                60px*$timer -65px*$timer 40px*$timer transparentize($magenta, 0.2),
        );
      }
      img {
        width: 100%;
        display: block;
        margin: 0 auto;
      }
    }
    .project-name {
      margin-top: 20px;
      text-align: center;
      color: $color-main;
      font-size: $fz-title;
    }
    .desc{
      margin-top: 20px;
      text-align: center;
      color: $color-main;
      font-size: $fz-title;
    }
  }

  .footer {
    padding: 20px 0 0;
    display: flex;
    justify-content: space-between;

    &.center{
      justify-content: center;
    }

    > * {
      cursor: pointer;
      font-size: $fz-note;
      color: $text-label;

      &:hover, &:active {
        color: white;
      }
    }

    &.flex-start {
      justify-content: flex-start;
    }

    &.flex-end {
      justify-content: flex-end;
    }
  }
}

.input-group {
  margin-bottom: 15px;

  label {
    display: block;
    line-height: 200%;
    font-size: $fz-note;
    color: $bg-light;
  }

  input {
    background-color: $bg-menu;
    width: 100%;
    @include border-radius();
    display: block;
    line-height: 1.5;
    padding: 8px 15px;
    font-size: $fz-title;
    color: white;
    font-weight: bold;
    transition: all .5s;

    &:focus {
      background-color: $bg-menu;
      transition: all .5s;
      @include box-shadow(0 0 0 2px $color-main);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: transparent;
      border: 1px solid transparentize($color-main, 0.8);
    }
  }

  &.white {
    label {
      color: $text-content;
    }

    input {
      background-color: $bg-light;
      color: $text-content;

      &:focus {
        background-color: white;
        @include box-shadow(0 0 0 2px $color-main);
      }
    }
  }
}

.btn {
  border: 1px solid transparent;
  padding: 8px 15px;
  text-align: center;
  width: 100%;
  display: block;
  font-weight: bold;
  font-size: $fz-title;
  cursor: pointer;
  @include border-radius();

  &:active {
    transform: translateY(2px);
  }

  @extend .btn-like;
}

.btn-active {
  color: $bg-main;
  background-color: $color-main;

  &:hover {
    background-color: darken($color-main, 5%);
  }
}

.btn-light {
  font-weight: normal;
  border-color: $color-border;
  color: $text-content;
  background-color: white;

  &:hover {
    background-color: darken(white, 1%);
  }
}


.btn-inactive {
  color: $gray;
  border: 1px solid transparentize(white, 0.8);
  background-color: transparent;

  &:hover {
    border: 1px solid transparentize(black, 0.8);
    background-color: transparentize(black, 0.9);
  }
}


.link-btn {
  text-align: center;

  a {
    font-size: $fz-small;
    color: $color-main;
  }

}


// PC
@media (min-width: $grid-separate-width-big) {
  .body-login-bg {
    align-items: center;
  }
  .body-login {
    padding-bottom: 80px; // 使居中时登录面板往上一点
    width: $menu-panel-big;
    //margin-left: auto;
    //margin-right: auto;
    .logo-wrapper {
      padding: 0 0 30px;
    }
  }
}

// PC & IPAD
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .body-login-bg {
    align-items: center;
  }
  .body-login {
    padding-bottom: 80px;
    padding-top: 0;
    width: $menu-panel-big;
    margin-left: auto;
    margin-right: auto;

    .logo-wrapper {
      padding: 0 0 30px;
    }
  }
}


@media (prefers-color-scheme: dark) {
  // LOGIN AND REGISTER
  .body-login-bg {
    background-color: $dark-bg-nav;

    .input-group {
      margin-bottom: 15px;

      label {
        display: block;
        line-height: 200%;
        font-size: $fz-note;
        color: $bg-light;
      }

      input {
        background-color: $dark-bg;

        &:focus {
          background-color: lighten($dark-bg, 3%);
        }
      }
    }
  }
  .btn-light {
    border-color: $dark-border-active;
    color: $dark-text;
    background-color: $dark-bg;

    &:hover {
      background-color: darken($dark-bg, 5%);
    }
  }

  .input-group {
    &.white {
      label {
        color: $bg-light;
      }

      input {
        background-color: $bg-menu;
        font-size: $fz-title;
        color: white;

        &:focus {
          background-color: $bg-menu;
        }
      }
    }
  }
}
